<template>
  <div>
    <Shortcut :isLogined="isLogined" :userName="userName"></Shortcut>
    <Header @changeSearch="changeSearch" :isLogined="isLogined"></Header>
    <Search v-if="search" :select="select" :input="input"></Search>
    <Index v-else :isLogined="isLogined" :userName="userName" :userIcon="userIcon"></Index>
    <Fixedtool></Fixedtool>
    <Footer></Footer>
  </div>
</template>

<script>
import Shortcut from "../src/components/Shortcut";
import Header from "../src/components/Header";
import Index from "../src/components/Index";
import Search from "../src/components/Search";
import Fixedtool from "../src/components/Fixedtool";
import Footer from "../src/components/Footer";
export default {
  components: {
    Shortcut,
    Header,
    Index,
    Search,
    Fixedtool,
    Footer
  },
  data() {
    return {
      isLogined: false,
      userName: "",
      userIcon: "./assets/img/user_default_icon.jpg",
      search: false,
      select: '1',
      input: '',
    };
  },
  methods: {
    goToLogin() {
      window.location.href = process.env.LOGIN_URL;
    },
    goToUserCenter() {
      // window.location.href = process.env.USERCENTER_URL;
      window.open(process.env.USERCENTER_URL, '_blank');
    },
    goToOrder() {
      // window.location.href = process.env.ORDER_URL;
      window.open(process.env.ORDER_URL, '_blank');
    },
    goToMessage() {
      // window.location.href = process.env.MESSAGE_URL;
      window.open(process.env.MESSAGE_URL, '_blank');
    },
    goToShoppingcart() {
      window.location.href = process.env.SHOPPINGCART_URL;
    },
    changeSearch(value1, value2, value3) {
      this.search = value1;
      this.select = value2;
      this.input = value3;
    },
  },
  mounted() {
    var url = process.env.URL_HEAD + "/touser/user/page/init/info";
    // var url = process.env.URL_HEAD + "/api/touser/user/page/init/info";
    this.$http
      .get(url, {
        withCredentials: true,
      })
      .then(
        (response) => {
          console.log("connect " + url + " success");
          console.log(response);

          if (response.data.user != null) {
            this.isLogined = true;
            var user = response.data.user;
            this.userName = user.userName;
            this.userIcon = user.userIcon;

            console.log("initInfo success: " + this.userName);
          } else {
            this.isLogined = false;
            this.userName = "";
            this.userIcon = "./assets/img/user_default_icon.jpg";

            console.log("initInfo success: nobody login");
          }
        },
        (response) => {
          this.isLogined = false;
          this.userName = "";
          this.userIcon = "./assets/img/user_default_icon.jpg";

          console.log("initInfo error: cannot connect " + url);
        }
      );
  },
};
</script>

<style>
/*基础样式*/
/*把内外边距清零*/
* {
  margin: 0;
  padding: 0;
}
/*em和i斜体的文字不倾斜*/
em,
i {
  font-style: normal;
}
/*去掉li的小圆点*/
li {
  list-style: none;
}
/*清除图片边框和底部空隙*/
img {
  /*照顾低版本浏览器ie6中如果图片外面包含了链接会有边框的问题*/
  border: 0;
  /*取消图片底侧有空白缝隙的问题*/
  vertical-align: middle;
}
/*当我们鼠标经过按钮的时候，鼠标变成小手*/
button {
  cursor: pointer;
}
/*链接字体颜色和去下划线*/
a {
  color: #666;
  text-decoration: none;
}
/*鼠标经过链接时的字体颜色和鼠标样式*/
a:hover {
  color: #c81623;
  cursor: pointer;
}
/*按钮和输入框的字体、边框和轮廓线*/
button,
input {
  /*"\5B8B\4F53" 就是宋体的意思，这样浏览器兼容性比较好*/
  font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB",
    "\5B8B\4F53", sans-serif;
  /*默认有灰色边框需要手动去掉*/
  border: 0;
  outline: none;
}
/*正文样式设置*/
body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 "Microsoft YaHei", "Heiti SC", tahoma, arial,
    "Hiragino Sans GB", "\5B8B\4F53", sans-serif;
  color: #666;
}
/*隐藏元素*/
.hide,
.none {
  display: none;
}
/*清除浮动*/
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.clearfix {
  *zoom: 1;
}
/*左浮动*/
.fl {
  float: left;
}
/*有浮动*/
.fr {
  float: right;
}
/*版心*/
.w {
  width: 1200px;
  margin: 0 auto;
}
/*页面中存在多处需要红色的内容*/
.style-red {
  color: #c81623;
}
/*内容之间的间隔竖线*/
.spacer {
  width: 1px;
  height: 12px;
  background-color: #666;
  /*上外边距8px，左右外边距12px，下外边距0px*/
  margin: 9px 12px 0;
}
</style>